<template>
	<view>
		<!--   用户姓名---电话    -->
		<view class="box-shang">
			<!--头像 -->
			<image src="@/static/头像.jpg" mode="" @click="toMessage"></image>
			<!-- 姓名  电话 -->
			<view class="box-shang-wenzi" @click="toMessage">
				<view style="color: aliceblue;">张毅</view>
				<view style="color: aliceblue;">12343234532</view>
			</view>
			<!--   设置个人信息     -->
			<image src="../../../static/头像.jpg" mode="" style="
			float: right;
			width: 70rpx;
			height: 70rpx;
			margin: 110rpx 50rpx 0rpx 0rpx;
			" @click="toMessage"></image>

		</view>
		<!--   优惠券 -->
		<view class="box-zhong-youhui">
			<view>优惠券</view>
			<view>3张</view>
		</view>

		<!--      我的订单     -->
		<view class="box-zhong-dingdan">
			<view style="
			display: flex;
			justify-content: space-between;
			padding: 15rpx;
			">
				<view style="font-weight:bold;">我的订单</view>
				<view @click="toDingDan">全部订单</view>
			</view>
			<view class="box-zhong-dingdan-tupian" style="
			display: flex;
			justify-content: space-around;">
				<!-- 待支付 -->
				<view @click="toDingDan">
					<image src="@/static/待支付.png" mode=""></image>
					<view>待支付</view>
				</view>
				<!-- 待使用 -->
				<view @click="toDingDan">
					<image src="@/static/待使用.png" mode=""></image>
					<view>待使用</view>
				</view>
				<!-- 待评价 -->
				<view @click="toDingDan">
					<image src="@/static/待评价.png" mode=""></image>
					<view>待评价</view>
				</view>
			</view>
		</view>
		<!--      我的服务         -->
		<view>
			<view style="
			margin: 50rpx;
			font-weight: bold;
			">我的服务</view>

			<view class="box-xia">

				<!-- 领券中心 -->
				<view>
					<image src="@/static/领券中心.png" mode=""></image>
					<view>领券中心</view>
				</view>
				<!-- 邀请好友 -->
				<view>
					<image src="@/static/邀请好友.png" mode=""></image>
					<view>邀请好友</view>
				</view>
				<!-- 我的车辆 -->
				<view>
					<image src="@/static/我的车辆.png" mode=""></image>
					<view>我的车辆</view>
				</view>
				<!-- 消费记录 -->
				<view @click="toXiaoFei">
					<image src="@/static/消费记录.png" mode=""></image>
					<view>消费记录</view>
				</view>
				<!-- 我的维修 -->
				<view @click="toWeiXiu">
					<image src="@/static/我的维修.png" mode=""></image>
					<view>我的维修</view>
				</view>
				<!-- 意见反馈 -->
				<view>
					<image src="@/static/意见反馈.png" mode=""></image>
					<view>意见反馈</view>
				</view>
				<!-- 收货地址 -->
				<view>
					<image src="@/static/收货地址.png" mode=""></image>
					<view>收货地址</view>
				</view>
			</view>

		</view>

		<!-- 退出登录 -->
		<view style="text-align: center; color: royalblue;">退出登录</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toMessage(){
				uni.navigateTo({
					url:"/pages/my/index/message/message"
				})
			},
			toDingDan(){
				uni.navigateTo({
					url:"/pages/my/index/dingDan/dingDan"
				})
			},
			toXiaoFei(){
				uni.navigateTo({
					url:"/pages/my/index/xiaoFei/xiaoFei"
				})
			},
			toWeiXiu(){
				uni.navigateTo({
					url:"/pages/my/index/weiXiu/weiXiu"
				})
			},
		}
	}
</script>

<style>
	.box-shang {
		background-color: #5290ff;
		height: 300rpx;
	}

	.box-shang image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		float: left;
		margin: 70rpx 20rpx 0rpx 20rpx;
	}

	.box-shang-wenzi {
		padding-top: 90rpx;
		float: left;
	}

	.box-zhong-youhui {
		width: 600rpx;
		height: 160rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	/* 	position: absolute; */
	}

	.box-zhong-youhui view {
		margin: 53rpx;
	}

	.box-zhong-dingdan {
		width: 90%;
		height: 180rpx;
		margin: auto;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.box-zhong-dingdan-tupian image {
		width: 50rpx;
		height: 50rpx;
		padding-left: 15rpx;
	}
	.box-xia{
		display: flex;
		margin: 50rpx;
		flex-wrap: wrap;
	}
	.box-xia view{
		width: 150rpx;
		height: 150rpx;
		/* background-color: #fff; */
	}
	.box-xia image{
		width: 50rpx;
		height: 50rpx;
		padding-left: 25rpx;
	}
</style>